<!DOCTYPE html>
<html>
  <head>
    <title>Light2</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
	<!-- GC -->
	<!-- LIBS -->
	<script type="text/javascript" src="ext/adapter/ext/ext-base.js">
	</script>
	<!-- END LIBS -->
	<script type="text/javascript" src="ext/ext-all.js">
	</script>
	<style type="text/css">
		html,body {
			font: normal 12px verdana;
			margin: 0;
			padding: 0;
			border: 0 none;
			overflow: hidden;
			height: 100%;
		}
		
		.empty .x-panel-body {
			padding-top: 0;
			text-align: center;
			font-style: italic;
			color: gray;
			font-size: 11px;
		}
		
		.x-btn button {
			font-size: 14px;
		}
		
		.x-panel-header {
			font-size: 14px;
		}
	</style>
	<script type="text/javascript">
		Ext.onReady( function(){
			var addPanel = function(btn, event) {
				var n;
				n = tabPanel.getComponent(btn.id);
				if (n) {
					tabPanel.setActiveTab(n);
					return;
				}
				n = tabPanel.add({
					id: btn.id,
					title: btn.id,
					html: '<iframe width=100% height=100% src=' + btn.id + ' />',
					//autoLoad : '',
					closable: 'true'
				});
				tabPanel.setActiveTab(n);
			};
		
			var item_user = new Ext.Panel( {
				title: 'User Manage',
				cls: 'empty',
				items: [
				        new Ext.Button({
				        	id: 'user_list',
				        	text: 'User List',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        })
				        ]
			});
			
			var item_staff = new Ext.Panel( {
				title: 'Staff Manage',
				cls: 'empty',
				items: [
				        new Ext.Button({
				        	id: 'Staff_list',
				        	text: 'Staff List',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        }),
				        
				        new Ext.Button({
				        	id: 'Staff_add',
				        	text: 'Staff Add',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        })
				        ]
			});
			
			var item_category = new Ext.Panel( {
				title: 'Category Manage',
				cls: 'empty',
				items: [
				        new Ext.Button({
				        	id: 'category_list',
				        	text: 'Category List',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        }),
				        
				        new Ext.Button({
				        	id: 'category_addInput',
				        	text: 'Category Add',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        })
				        ]
			});
			
			var item_order = new Ext.Panel( {
				title: 'Order Manage',
				cls: 'empty',
				items: [
				        new Ext.Button({
				        	id: 'Order_list',
				        	text: 'Order List',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        }),
				        
				        new Ext.Button({
				        	id: 'Order_delete',
				        	text: 'Order Delete',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        })
				        ]
			});
			
			var item_product = new Ext.Panel( {
				title: 'Product Manage',
				cls: 'empty',
				items: [
				        new Ext.Button({
				        	id: 'Product_list',
				        	text: 'Product List',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        }),
				        
				        new Ext.Button({
				        	id: 'Product_add',
				        	text: 'Product Add',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        })
				        ]
			});
			
			var item_financial = new Ext.Panel( {
				title: 'Financial Statement',
				cls: 'empty',
				items: [
				        new Ext.Button({
				        	id: 'Financial_statement',
				        	text: 'Statement',
				        	width: '100%',
				        	listeners: {
				        		click: addPanel
				        	}
				        })
				     
				        ]
			});
		
			var accordion = new Ext.Panel( {
				region: 'west',
				margins: '5 0 5 5',
				split: true,
				width: 210,
				layout: 'accordion',
				items: [item_user, item_staff, item_category, item_order, item_product, item_financial]
			});	
			
			var tabPanel = new Ext.TabPanel({
				region: 'center',
				enableTabScroll: true,
				deferredRender: false,
				activeTab: 0,
				items: [{
					title: 'index',
					html: 'hello world!'
				}]
			});
		
			var viewport = new Ext.Viewport( {
				layout: 'border',
				items: [ accordion, tabPanel ]
			});
		});
	</script>
  </head>
  
  <body>
  </body>
</html>
